<template>
  <div class="network-dialog">
    <el-dialog title="拆分网段" :visible.sync="showDialog" width="42%" :before-close="handleClose"
      @update:showDialog="toggleDialog">
      <el-form label-width="100px" ref="form" :model="form">
        <el-form-item label="原网段：" :rules="[{ required: true }]">{{ detail.ipAddress }}
        </el-form-item>
        <el-form-item label="IP容量：" :rules="[{ required: true }]">{{ detail.ipSize }}
        </el-form-item>
        <el-form-item label="拆分数量：" prop="number" :rules="[
          { required: true, message: '请填写拆分数量', trigger: 'blur' },
        ]">
          <el-select v-model="form.number" placeholder="请选择拆分数量">
            <el-option v-for="item in splitNumberList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          <el-button type="primary" @click="splitNetwork" style="margin-left: 10px">拆分</el-button>
        </el-form-item>
        <template v-for="(item, index) in form.splitList">
          <el-divider :key="+index + '.id'"></el-divider>
          <el-form-item label="新网段" :prop="'splitList.' + index + '.ipAddress'" :key="+index + '.ipAddress'">
            {{ item.ipAddress }}
          </el-form-item>
          <el-form-item label="业务类型" :prop="'splitList.' + index + '.businessType'" :rules="[
            { required: true, message: '请选择办公类型', trigger: 'change' },
          ]" :key="+index + '.businessType'">
            <el-select v-model="item.businessType" placeholder="请选择业务类型">
              <el-option v-for="dict in dict.type.business_type" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="办公地区" :prop="'splitList.' + index + '.address'" :rules="[
            { required: true, message: '请选择办公地区', trigger: 'change' },
          ]" :key="+index + '.address'">
            <el-select v-model="item.address" placeholder="请选择办公地区">
              <el-option v-for="dict in dict.type.office_area" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否分配" :prop="'splitList.' + index + '.isAllocation'" :rules="[
            { required: true, message: '请选择是否分配', trigger: 'change' },
          ]" :key="+index + '.isAllocation'">
            <el-radio-group v-model="item.isAllocation">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="单位" :prop="'splitList.' + index + '.unit'" :rules="[
            { required: true, message: '请输入单位', trigger: 'blur' },
          ]" :key="+index + '.unit'" v-if="item.isAllocation == '1'">
            <el-input v-model="item.unit"> </el-input>
          </el-form-item>
        </template>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">确定</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  distributeIP,
  addDistributeIP,
} from "@/api/businessSupport/businessManagement.js";
export default {
  dicts: ["business_type", "office_area"],
  data() {
    return {
      form: {
        splitList: [],
      },
      splitNumberList: [],
    };
  },
  components: {},
  props: {
    //弹窗显、隐
    showDialog: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {},
  methods: {
    getDivisibleNumbers(num) {
      for (let i = 2; i <= num; i++) {
        if (num % i === 0) {
          this.splitNumberList.push(i); // 存放符合条件的数字的数组
        }
      }
    },
    async splitNetwork() {
      if (!this.form.number) {
        this.$message({
          type: "warning",
          message: "请选择拆分数量",
        });
        return;
      }
      const result = await distributeIP({
        id: this.detail.id,
        sum: this.form.number,
      });
      this.form.splitList = result.data;
    },
    // 弹窗关闭
    handleClose() {
      this.toggleDialog();
    },
    toggleDialog(visible = false) {
      this.$emit("update:showDialog", visible);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addDistributeIP();
        } else {
          return false;
        }
      });
    },
    async addDistributeIP() {
      if (!this.form.splitList.length) {
        return;
      }
      const result = await addDistributeIP({
        id: this.detail.id,
        list: this.form.splitList,
      });
      this.$message({
        type: "success",
        message: result.msg,
      });
      this.$emit("updateList");
      this.handleClose();
    },
  },
  mounted() {
    this.getDivisibleNumbers(this.detail.ipSize);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input {
  width: 300px;
}

::v-deep .el-input-number {
  width: 300px;
}

::v-deep .el-form {
  overflow: auto;
}
</style>
